<template>
  <!-- CardMemberCouponList 福利券列表 -->
  <PageContainer>
    <view class="container">
      <Header :title="pageTitle" :is-box-shadow="false" />
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="item" @click.stop="toCouponDetails(v)">
            <view class="item-cover">
              <TImage :src="v.couponCover" width="212rpx" height="170rpx" border-radius="10rpx" />
            </view>
            <view class="item-info">
              <view class="item-title text-overflow-2">
                <text>{{ v.name }}</text>
              </view>
              <button v-if="isMine" type="none" class="item-button">查看详情</button>
              <template v-else>
                <button
                  v-if="v.status === MemberCouponStatusEnum.UNRECEIVED"
                  type="none"
                  class="item-button"
                  @click.stop="toReceive(v)"
                >
                  立即领取
                </button>
                <button
                  v-if="v.status === MemberCouponStatusEnum.RECEIVED"
                  :disabled="true"
                  type="none"
                  class="item-button"
                >
                  已领取
                </button>
                <button
                  v-if="v.status === MemberCouponStatusEnum.EXHAUST"
                  :disabled="true"
                  type="none"
                  class="item-button"
                >
                  已领完
                </button>
                <button
                  v-if="v.status === MemberCouponStatusEnum.FINISHED"
                  :disabled="true"
                  type="none"
                  class="item-button"
                >
                  已结束
                </button>
              </template>
            </view>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  CardMemberCouponList  福利券列表 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import { computed, provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { type CardMemberCouponListResult } from '@/api/memberCoupon/types';
  import { cardMemberCouponList, receiveCoupon } from '@/api/memberCoupon';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { MemberCouponStatusEnum } from '@/enums/memberCouponEnum';

  const { cocInfo } = useUserStoreWithOut();
  const pageTitle = ref('');
  const isMine = computed(() => parame.leadingId === cocInfo.id);
  onLoad<'CardMemberCouponList'>((op) => {
    parame.leadingId = op.leaderId;
    pageTitle.value = isMine.value ? '您送出的福利' : '您尊享的福利';
    refresh();
  });

  const parame = reactive({
    leadingId: 0,
  });
  const dataList = ref<CardMemberCouponListResult[]>([]);
  const [register, { refresh }] = useConList();

  provide('api', cardMemberCouponList);
  provide('tabIsShow', null);

  function toCouponDetails(item: CardMemberCouponListResult) {
    navigateTo({
      name: 'memberCouponDetails',
      options: {
        id: item.id,
        success: () => {
          item.status = MemberCouponStatusEnum.RECEIVED;
        },
      },
    });
  }

  /** 领取优惠券 */
  function toReceive(item: CardMemberCouponListResult) {
    receiveCoupon({
      couponId: item.id,
      isShare: false,
      num: 1,
    }).then(() => {
      item.status = MemberCouponStatusEnum.RECEIVED;
      navigateTo({ name: 'receiveCouponResult', options: { id: item.id } });
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;
    padding: 0 30rpx;
    .item {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dddddd;
      &-cover {
        width: 212rpx;
        flex-shrink: 0;
        margin-right: 22rpx;
      }
      &-info {
        height: 170rpx;
        flex: 1;
        color: #333;
        font-size: 28rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .item-button {
          align-self: flex-end;
          width: 142rpx;
          height: 42rpx;
          background: #e9e3b5;
          border-radius: 10rpx;
          line-height: 42rpx;
          text-align: center;
          font-size: 24rpx;
          color: #333;
          &[disabled] {
            background: #dddddd;
            color: #aaabab;
          }
        }
      }
    }
  }
</style>
